import { useState } from 'react'
import Taro from '@tarojs/taro'
import { View } from '@tarojs/components'
import { AtAvatar, AtFloatLayout } from 'taro-ui'
import classNames from 'classnames'
import styles from './index.less'
import ActionSheetHeader from '../../components/ActionSheetHeader'
import ActionItem from '../../components/ActionItem'


const User = () => {

  const [userInfoAuth, setUserInfoAuth] = useState(false)

  const [isOpened, setIsOpened] = useState(false)

  const [userInfo, setUserInfo] = useState({ avatarUrl: '', nickName: '' })

  const handlegetUserInfo = () => {
    Taro.getUserProfile({
      desc: '用于完善登录用户资料',
      success: (res) => {
        console.log(res)
        setUserInfo(res.userInfo)
        setUserInfoAuth(false)
      },
      fail: (err) => {
        setUserInfoAuth(true)
      }
    })
  }

  const handleFloatLayoutOpen = (visible) => {
    setIsOpened(visible)
  }

  const handlePerfer = () => {
    if (!userInfoAuth) {
      handleFloatLayoutOpen(true)
    }
  }

  const handlePlace = () => {
    if (!userInfoAuth) {
      handleFloatLayoutOpen(true)
    }
  }

  const handleFood = () => {
    if (!userInfoAuth) {
      handleFloatLayoutOpen(true)
    }
  }

  const handleSugg = () => {
    if (!userInfoAuth) {
      handleFloatLayoutOpen(true)
    }
  }

  return (
    <View className={styles.user}>
      <View className={styles.user__info}>
        <View className={styles.info} onClick={() => handleFloatLayoutOpen(true)}>
          <AtAvatar
            size='large'
            circle
            text={userInfo.avatarUrl ? '' : '暂无头像'}
            image={userInfo.avatarUrl}
            className={styles.avatar}
          />
          <View className={styles.username}>
            { userInfo.nickName? (
                <View className={styles.username__name}>
                  { userInfo.nickName }
                </View>
              ) : (
                <View className={styles.username__noLogin}>
                  <View className={styles.login__status}>未登录</View>
                  <View className={styles.click__login}>点击登录</View>
                </View>
              ) 
            }
          </View>
        </View>
        <AtFloatLayout isOpened={isOpened} onClose={() => handleFloatLayoutOpen(false)}>
          <ActionSheetHeader
            title='登录账号'
            confirmText='取消'
            onCancel={() => handleFloatLayoutOpen(false)}
          />
          
        </AtFloatLayout>
      </View>
      <View className={styles.user__list}>
        <View className={styles.list__container}>
          <ActionItem iconName='perfer' text='日常偏好' onClick={handlePerfer}/>
          <ActionItem iconName='place' text='向往地点' onClick={handlePlace}/>
          <ActionItem iconName='food' text='收藏美食' onClick={handleFood}/>
          <ActionItem iconName='sugg' text='推荐给朋友' onClick={handleSugg}/>
        </View>
      </View>
    </View>
  )
}

export default User